<template>
  <div  v-if="Object.keys(newarr).length !== 0">
      <div class="top">
        <span @click="fun()" style="font-size:.14rem">💜返回</span>
        <p>护苗，我们在行...</p>
        <h1>···</h1>
      </div>
      <div class="banner">
        <img src="images/2_02.jpg" alt="">
      </div>
      <div class="sort">
        <ul>
          <li>
            <img src="images/2_05.jpg" alt="">
          </li>
          <li>
            <img src="images/2_07.jpg" alt="">
          </li>
          <li>
            <img src="images/2_09.jpg" alt="">
          </li>
        </ul>
      </div>

      <div>
        <div class="edu">
             <h1>专题教育</h1>
             <p>查看更多></p>
      </div>
      <div class="zhuanqu1">
         <ul>
           <li v-for="(v,i) in newarr.spot" :key="i">
             <img :src="v.imgUrl">                                                                                                                                                                                                                                    ·
             <div>
              <h4>{{v.title}}</h4>
             <p>{{v.name}}</p>
             <span>{{v.text}}</span>
             </div>
           </li>
         </ul>
      </div>
     <!-- {{newarr.spot}} -->
     <div class="edu">
             <h1>社区通报</h1>
             <p>查看更多></p>
      </div>
      <div class="zhuanqu1 zhuanqu2">
         <ul>
           <li v-for="(v,i) in newarr.spot1" :key="i">
             <img :src="v.imgUrl">                                                                                                                                                                                                                                    ·
             <div>
              <h4>{{v.title}}</h4>
             <p>{{v.name}}</p>
             <span>{{v.text}}</span>
             </div>
           </li>
         </ul>
      </div>
</div>
  </div>
</template>

<script>
export default {
methods: {
  fun(){
    this.$router.push("./myself")
  }
},
  mounted() {
    // 1.在页面加载完毕后自动使用生命周期的钩子函数  dispatch
    // 来触发vuex的调用异步操作
    this.$store.dispatch("demoaxiose");
  },
  // 12.读取state的数据
  computed: {
    newarr(){
      //  console.log(this.$store.state.aboutm.arr.stop)
    return this.$store.state.spotm.arr
   
  }
  },
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
  list-style: none;
}
.top{
  display: flex;
  height: .4rem;
  width: 100%;
  /* background-color: pink; */
  background-color: #fff;
  line-height: .4rem;
  position: relative;
  position: fixed;
top: 0;
left: 0;
z-index: 999;
}
.top>span{
color: gray;
font-size: .25rem;
margin-right: .25rem;
}
.top>p{
  font-size: .2rem;
}
.top>h1{
  position: absolute;
  right: .3rem;
}
.banner{
  width: 100%;
  height: 2rem;
}
.banner>img{
  width: 100%;
  height: 100%;
}
.sort>ul{
  margin-top: .1rem;
   margin-bottom: .2rem;
  display: flex;
  justify-content: center;
}
.sort>ul>li{
  width: 1.305rem;
  height: .675rem;
  margin-right: .1rem;
}
.sort>ul>li>img{
  width: 100%;
  height: 100%;
}
.sort>ul>li:nth-child(1){
  margin-left: .1rem;
}
.edu{
  display: flex;
  position: relative;
}
.edu>h1:nth-child(1){
  float: left;
  margin-left: .25rem;
  font-size: .2rem;
  font-weight: 600;
}
.edu>p:nth-child(2){
  position: absolute;
  right: .25rem;
  font-size: .15rem;
  font-weight: 100;
  color: gray;
}
.zhuanqu1>ul>li{
   display: flex;
   
}
.zhuanqu1>ul>li>img{
  width: 1.475rem;
  height: .975rem;
  margin: .1rem  0;
  margin-left: .1rem;
}
.zhuanqu1>ul>li>div{
  margin-top: .15rem;
  margin-left: .1rem;
}
.zhuanqu1>ul>li h4{
  color: #d39596;
  font-size: .2rem;
  margin-bottom: .1rem;
}
.zhuanqu1>ul>li p{
  font-size: .15rem;
  font-weight: 600;
  margin-bottom: .1rem;
  
}
.zhuanqu1>ul>li span{
  font-size: .12rem; 
}
.zhuanqu2{
  margin-bottom: .5rem;
}
.zhuanqu2>ul>li p{
  font-size: .14rem;
  font-weight: 600;
  
}
.zhuanqu2>ul>li>div{
  margin-top: .15rem;
  margin-left: .05rem;
}
</style>